{% extends 'base.html' %}

{% block title %}预测历史 - 乳腺癌预测系统{% endblock %}

{% block content %}
<div class="container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item"><a href="/profile">个人资料</a></li>
            <li class="breadcrumb-item active" aria-current="page">预测历史</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-10 mx-auto">
            <!-- 页面标题 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>
                    <i class="fas fa-history me-2"></i>
                    预测历史
                </h2>
                <a href="/predict-form" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>
                    新建预测
                </a>
            </div>

            <!-- 统计概览 -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <i class="fas fa-calculator fa-2x text-primary mb-2"></i>
                            <h4 class="mb-1">{{ user.prediction_count or 0 }}</h4>
                            <p class="text-muted mb-0">总预测次数</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                            <h4 class="mb-1">-</h4>
                            <p class="text-muted mb-0">良性预测</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <i class="fas fa-exclamation-triangle fa-2x text-warning mb-2"></i>
                            <h4 class="mb-1">-</h4>
                            <p class="text-muted mb-0">恶性预测</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <i class="fas fa-chart-line fa-2x text-info mb-2"></i>
                            <h4 class="mb-1">-</h4>
                            <p class="text-muted mb-0">平均置信度</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 预测历史记录 -->
            <div class="card">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-list me-2"></i>
                        历史记录
                    </h5>
                </div>
                <div class="card-body">
                    <!-- 功能说明 -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>功能开发中：</strong>
                        预测历史记录功能正在开发中。当前版本只显示预测次数统计。
                        未来版本将包含详细的预测记录、结果对比和数据导出功能。
                    </div>

                    <!-- 示例历史记录表格 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>序号</th>
                                    <th>预测时间</th>
                                    <th>预测结果</th>
                                    <th>置信度</th>
                                    <th>用时</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 示例数据 -->
                                <tr class="table-secondary">
                                    <td colspan="6" class="text-center py-4">
                                        <i class="fas fa-database fa-2x text-muted mb-2"></i>
                                        <p class="text-muted mb-0">暂无预测历史记录</p>
                                        <p class="text-muted small">开始您的第一次预测吧！</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <nav aria-label="预测历史分页" class="mt-4">
                        <ul class="pagination justify-content-center">
                            <li class="page-item disabled">
                                <span class="page-link">上一页</span>
                            </li>
                            <li class="page-item active">
                                <span class="page-link">1</span>
                            </li>
                            <li class="page-item disabled">
                                <span class="page-link">下一页</span>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="row mt-4">
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-body text-center">
                            <i class="fas fa-calculator fa-3x text-primary mb-3"></i>
                            <h5>开始新预测</h5>
                            <p class="text-muted">输入医学参数，获取预测结果</p>
                            <a href="/predict-form" class="btn btn-primary">立即开始</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-body text-center">
                            <i class="fas fa-info-circle fa-3x text-info mb-3"></i>
                            <h5>参数说明</h5>
                            <p class="text-muted">了解30个预测参数的含义</p>
                            <a href="/params-info" class="btn btn-info">查看说明</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 使用提示 -->
            <div class="alert alert-warning mt-4">
                <i class="fas fa-lightbulb me-2"></i>
                <strong>使用提示：</strong>
                <ul class="mb-0 mt-2">
                    <li>预测结果仅供医学参考，不能替代专业医生诊断</li>
                    <li>建议保存重要的预测结果截图或记录</li>
                    <li>如有疑问，请咨询专业医疗人员</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
.card:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.table th {
    border-top: none;
}

.pagination .page-link {
    color: #007bff;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}
</style>
{% endblock %}
